<template>
	<!-- 树结构子组件 -->
	<view class="container" style="background-color: #fff;">
		<view style="border: 1px solid e6e6e6; margin: 20rpx;padding: 20rpx;">
			<view class="flex ">
				用户名：<uni-tag :text="userInfo.UserName" type="primary" style="margin-right: 30rpx;" />
				姓名：<uni-tag :text="userInfo.RealName" type="primary" />
			</view>
			<view style="margin-top: 20rpx;">
				所属角色：<uni-tag :text="userInfo.RoleNames" type="primary" />
			</view>
			<view style="margin-top: 20rpx;">
				<view>已有权限系统模块：</view>
				<view class="flex wrap">
					<uni-tag v-for="(item, index) in UserMenuPermissionsData" :key="index" :text="item.ModuleName"
						style="margin-right: 15rpx;margin-bottom: 20rpx;" type="warning" />
				</view>

			</view>
		</view>




		<view v-for="(item, index) in UserMenuPermissionsData" :key="index">
			<view style="border: 1px solid #ccc;background-color: #FAFAFA;padding: 20rpx;margin: 0 10rpx;">
				{{ item.ModuleName}}
			</view>
			<treeNode :list="item.UMPTrees" @change="treeChange"></treeNode>
		</view>
	</view>
</template>



<script>
	// 引用树形结构组件
	import TreeNode from "@/components/treeNode.vue"
	// 引入公共接口文件
	import {
		// 个人权限列表
		Base_UserGetUserMenuPermissions
	} from "@/api/interface.js";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			TreeNode
		},
		data() {
			return {
				// 用户信息
				userInfo: {},
				// 个人权限列表
				UserMenuPermissionsData: [],
			}
		},
		onShow() {
			this.userInfo = this.UserInfo.UserInfo

			// 获取个人权限列表信息
			this.GetUserMenuPermissionsListData()
		},
		computed: {
			...mapState(["UserInfo"]),
		},
		methods: {
			// 树结节点点击事件
			treeChange(e) {},
			// 获取个人权限列表信息
			GetUserMenuPermissionsListData() {
				uni.showLoading({
					title: '加载中'
				})
				Base_UserGetUserMenuPermissions({
					userId: this.userInfo.Id
				}).then(resJson => {
					if (resJson.Success) {
						this.UserMenuPermissionsData = resJson.Data
						uni.hideLoading()
					}
					console.log('获取权限用户j结果', this.UserMenuPermissionsData, resJson.Data)
				})

			}
		}
	}
</script>

<style scoped lang="less">
	.container {}
</style>